<!--近期收支统计-->
<template>
    <div style="margin-left: 30px;margin-top: 10px">
        <div style="margin-bottom: 30px;margin-top: 30px">
            <el-row>
                <el-col :span="16">
                    <span class="main-title">近期物料生产使用情况统计</span>
                </el-col>

            </el-row>
        </div>
        <el-row align="middle" justify="space-evenly">
            <el-col :span="12" style="padding-right: 5px">
                <el-card shadow="never">
                    <div style="display: flex; align-items: center">
                        <div class="gradient-box" style="width: 10px;height:10px;background: #1c1f2a;"></div>
                        <div style="margin-left: 20px">
                            <div>累计生产</div>
                            <el-statistic :value="inPro"/>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" style="padding-right: 5px">
                <el-card shadow="never">
                    <div style="display: flex; align-items: center">
                        <div class="gradient-box" style="width: 10px;height:10px;background: #1c1f2a;"></div>
                        <div style="margin-left: 20px">
                            <div>累计使用</div>
                            <el-statistic :value="inUse"/>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="echars-box" style="display: flex;align-content: center;justify-content: center;">
            <div id="box" ref="box" style="width: 65vh;height: 300px"></div>
        </div>
    </div>
</template>

<style scoped>
.title {
    font-size: 15px;
    line-height: 40px;
    color: #999;
}

.main-title {
    font-size: 22px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: "Microsoft YaHei", ui-serif;
    color: #3a415b;
    font-weight: 600;
}
</style>

<script setup>
import {onMounted, ref} from 'vue';
import * as echarts from 'echarts';//3.当前页面引入
// import { getReportsList } from '../../api/user.js'
let dataAxis = ['04-01', '04-02', '04-03', '04-04', '04-05', '04-06', '04-07', '04-08', '04-09', '04-10'];
// prettier-ignore
let data = [100, -182, 293, -234, 290, -330, 410, 423, 442, -321];
//把data里的负数全加起来，正数全加起来
let inPro = 0;
let inUse = 0;
for (let i = 0; i < data.length; i++) {
    if (data[i] < 0) {
        inUse += Math.abs(data[i]);
    } else {
        inPro += data[i];
    }
}

let yMax = 0;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}
let box = ref(null)
onMounted(async () => {
    let myecharts = echarts.init(box.value);
    var option = {
        title: {
            subtext: '展示近十天内的数据'
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: false,
                color: '#a9a9a9',
                position: 'bottom'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            min: Math.min(...data), // 设置 y 轴的最小值为 -500
            max: Math.max(...data),  // 设置 y 轴的最大值为 500
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: function (value, index) {
                    return value;
                },
                color: '#999'
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: function (params) {
                        if (params.data < 0) {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#f72323'},
                                {offset: 0.7, color: '#f76d23'},
                                {offset: 1, color: '#f6db83'}
                            ]);
                        } else {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]);
                        }
                    }
                },
                // emphasis: {
                //     itemStyle: {
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //             { offset: 0, color: '#2378f7' },
                //             { offset: 0.7, color: '#2378f7' },
                //             { offset: 1, color: '#83bff6' }
                //         ])
                //     }
                // },
                data: data
            }
        ]
    };
    const zoomSize = 6;
    myecharts.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myecharts.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
                dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });
    console.log("执行了");
    myecharts.setOption(option);
    window.onload = function () {
        console.log('窗口大小发生改变了');
        myecharts.resize();
    };
});
</script>
